<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header-container" style="background-color:#49525C;height:80px;">
        <div class="header-content" style="display:flex;justify-content:space-between;align-items:center;">
          <div style="display:flex;flex-direction:column;">
            <div class="header-title" style="color: #007bff;font-size:30px;font-weight: bold;">Make 报修管理系统</div>
            <div style="color: #007bff;font-size: 20px;font-family:Verdana, Geneva, Tahoma, sans-serif">期待为您服务</div>
          </div>
          <div class="header-actions">
            <el-link type="primary" style="color: red;" @click="logout">退出登录</el-link>
            <div><span>欢迎{{username}}</span></div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            default-active="2" text-color="#fff" @select="toPage">
            <el-menu-item index="/index1">
              <el-icon>
                  <HomeFilled />
                </el-icon>
              <span>后台首页</span>
            </el-menu-item>
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>物业报修管理</span>
              </template>
              <el-menu-item index="/repair1">维修任务</el-menu-item>
              <el-menu-item index="/dept">部门管理</el-menu-item>
              <el-menu-item index="/owner">业主管理</el-menu-item>
              <el-menu-item index="/repairPersonnel">维修人员</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>


</template>

<script setup>
import { RouterView, RouterLink } from 'vue-router'
import router from '@/router'
import { ref } from 'vue';
import loginApi from '@/api/loginApi';
import {useTokenStore} from "@/stores/token.js";

const username = ref('');
const tokenStore = useTokenStore()

function co() {
  loginApi.select().then(resp => {
    username.value=resp.data.username;
  })
}
function toPage(indexPath) {
  //编程式导航
  router.push(indexPath);
}
function logout() {
  tokenStore.$reset();
  router.push('/login');
}
co();
</script>
